<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>医生界面 - 智能医疗系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Vue.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<div id="app" class="container mt-5">
    <h2>待处理预约</h2>
    <a href="/logout" class="btn btn-secondary mb-3">注销</a>
    <button @click="fetchAppointments" class="btn btn-info mb-3">刷新列表</button>
    <div v-for="app in appointments" :key="app.id" class="card mb-3">
        <div class="card-body">
            <p><strong>预约ID:</strong> {{ app.id }}</p>
            <p><strong>患者:</strong> {{ app.patient.username }}</p>
            <p><strong>排班:</strong> 星期 {{ app.schedule.dayOfWeek }} ，时段 {{ app.schedule.timeSlot }}</p>
            <div class="mb-3">
                <input type="text" v-model="app.diagnosis" class="form-control" placeholder="填写诊断">
            </div>
            <!-- 在诊断输入框下方添加 -->

            <div v-if="stockWarning" class="alert alert-danger">
                部分药品库存不足！
            </div>
            <div class="mb-3">
                <label>选择药品：</label>
                <select v-model="selectedMeds" multiple class="form-control"
                        @change="updateSelectedMedicines">
                    <option v-for="med in medicines"
                            :value="med.id"
                            :disabled="med.stock < 1">
                        {{ med.name }} (库存: {{ med.stock }})
                    </option>
                </select>
            </div>
            <div class="mb-3" v-for="med in selectedMedicinesDetails">
                <label>{{ med.name }} 数量：</label>
                <input type="number" v-model="med.quantity"
                       min="1" :max="med.stock" class="form-control">
            </div>
            <div class="mb-3">
                <input type="text" v-model="app.prescription" class="form-control" placeholder="填写处方">
            </div>
            <button @click="completeAppointment(app)" class="btn btn-success">完成预约（开药）</button>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            appointments: [],
            selectedMeds: [],          // 新增
            medicines: [],             // 新增
            selectedMedicinesDetails: [] // 新增
        },
        methods: {
            fetchAppointments() {
                // 原有代码...
            },
            // 新增方法开始
            fetchMedicines() {
                fetch('/doctor/medicines', {
                    headers: {
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    }
                })
                    .then(response => response.json())
                    .then(data => this.medicines = data);
            },
            updateSelectedMedicines() {
                this.selectedMedicinesDetails = this.selectedMeds.map(id =>
                    this.medicines.find(med => med.id === id)
                );
            },
            // 新增方法结束
            completeAppointment(app) {
                // 修改请求体包含药品数据
                const requestBody = {
                    medicineQuantities: this.selectedMedicinesDetails
                        .reduce((acc, med) => {
                            acc[med.id] = med.quantity;
                            return acc;
                        }, {})
                };

                fetch(`/doctor/appointments/${app.id}/complete?diagnosis=${encodeURIComponent(app.diagnosis)}&prescription=${encodeURIComponent(app.prescription)}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer ' + localStorage.getItem('token')
                    },
                    body: JSON.stringify(requestBody)
                })
                    .then(response => response.json())
                    .then(data => {
                        alert("预约处理成功！");
                        this.fetchAppointments();
                    });
            }
        },
        mounted() {
            this.fetchAppointments();
            this.fetchMedicines(); // 新增
        }
    });
</script>
</body>
</html>
